<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <script src="echarts.min.js"></script>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" ><%--content="IE=edge"--%>
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->

</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            统计分析
            <small>在线人数统计</small>
        </h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div id="main" style="width: 1000px;height:600px;"></div>
        </div>
    </section>
</div>
</body>

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
   $.get("/stat/getonlineData.do",function (data) {

       var timearr=[];
       var countarr = [];
       for(var i = 0;i<data.length;i++){
           timearr[i] = data[i].time;
           countarr[i]=data[i].count;
       }
       var json = {
           chart0: {
               xcategory:timearr,
               low: countarr,
               lowLine: [],
           }
       };

//这东西能干啥用？

       var zrUtil = echarts.util;

       zrUtil.each(json.chart0.xcategory, function(item, index) {
           json.chart0.lowLine.push([{
               coord: [index, json.chart0.low[index]]
           }, {
               coord: [index + 1, json.chart0.low[index + 1]]
           }]);
       });

       option = {
           backgroundColor: "#fff",
           title: {
               text: '系统访问压力图',
               x: 'center',
               top: 50,
               textStyle: {
                   color: '#747474',
                   fontSize: 14,
                   fontWeight: 100,
               }
           },
           grid: {
               bottom: 50,
               left: 50,
               top: 130,
               right: 50,
           },
           xAxis: {
               axisLine: {

               },
               axisTick: {

               },
               axisLabel: {
                   interval: 0,

               },
               data: timearr
           },
           yAxis: {
               axisLine: {
                   show: false,
               },
               axisTick: {
                   show: false
               },
           },
           series: [{
               type: 'line',
               // smooth: true,
               symbol: 'circle',
               symbolSize: 25,
               lineStyle: {
                   normal: {
                       width: 4,
                       shadowColor: 'rgba(155, 18, 184, .3)',
                       shadowBlur: 10,
                       shadowOffsetY: 20,
                       shadowOffsetX: 20,
                       color: new echarts.graphic.LinearGradient(
                           0, 0, 1, 0,
                           [{
                               offset: 0,
                               color: 'rgba(255, 255, 255,1)'
                           }, {
                               offset: 0.1,
                               color: 'rgba(255, 75, 172,1)'
                           }, {
                               offset: 0.9,
                               color: 'rgba(155, 18, 184,1)'
                           }, {
                               offset: 1,
                               color: 'rgba(255, 255, 255,1)'
                           }, ]
                       )
                   }
               },
               itemStyle: {
                   color: '#fff',
                   borderColor: "#7c1fa2",
                   borderWidth: 4,
               },

               data:countarr
           },
               {
                   name: '',
                   type: 'lines',
                   coordinateSystem: 'cartesian2d',
                   zlevel: 1,
                   smooth: true,
                   symbol: 'circle',
                   symbolSize: 25,
                   effect: {
                       show: true,
                       smooth: false,
                       period: 2,
                       symbolSize: 8
                   },
                   lineStyle: {
                       normal: {
                           color: '#f00',
                           width: 0,
                           opacity: 0,
                           curveness: 0,
                       }
                   },
                   data: json.chart0.lowLine
               },

           ]
       };


       /*线形图
       *
       * */
       /*option={
           xAxis:{
               type:'category',
               data:timearr
           },
           yAxis:{
               type:'value'
           },
           series:[{
               data:countarr,
               type:'line'
           }]
       };*/
       myChart.setOption(option);

   });
</script>

</html>